<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- <div class="box">111
        <p>我是段落一</p>
        <p>我是段落二</p>
    </div>
    <span class="box2">222</span> -->

    <ul>
        <li>111</li>
        <li>222</li>
        <li class="active">333</li>
        <li>444</li>
        <li class="box">555</li>
    </ul>

    <script>
        // jq里的选择器 
        // 选择元素 操作元素 
        // var ele2 = document.querySelector(".box");// 原生的js 元素对象
        // console.log(ele2);
        //    ele.onclick = function(){
        //         console.log(111);
        //    }

        // jq 一、获取jq的对象  二 、操作 jq对象；
        // 注意 jq里的方法 都需要 小括号 ；
        // 1.类名 、 id  、标签 
        // var ele = $(".box");
        // // console.log(ele);
        // ele.click(function(){
        //     console.log(111);
        // });

        //    console.log($("div"));

        // 2.获取多个不同元素 , 使用逗号 隔开

        // var eles = $(".box,.box2");
        // console.log(eles);

        // 3.后代选择器 
        // var eles = $(".box p");
        // console.log(eles);

        // 4.子代选择器   >
        // var eles = $(".box>p");
        // console.log(eles);

        // 5.获取下一个相邻的元素 
        // var eles = $(".active+li");
        // console.log(eles);

        // 6.获取下一个所有的相邻元素 
        // var eles = $(".active~li");
        // console.log(eles);

        // 7.通过属性选择元素 

        // 是否拥有某个属性
        // 获取所有li中 有 class 属性的元素 
        // var eles = $("li[class]");
        // console.log(eles);

        // 8.属性等于某个值 
        // var eles = $("li[class=active]");
        // console.log(eles);

        // 9.属性以某某作为开头 
        // 获取 所有li中 类名是b开头的元素
        // var eles = $("li[class^=b]");
        // console.log(eles);

        // 10.属性中以某某作为结果的元素
        // var eles = $("li[class$=x]");
        // console.log(eles);

        // jq文档 ：https://jquery.cuishifeng.cn/index.html
        



    </script>
</body>

</html>